<template>
	<view class="seckill_container">
		<view class="goods_img_wrap">
			<u-swiper :list="banners" height="360rpx" circular indicator @change="e => currentNum = e.current"
				:indicatorStyle="{'text-align': 'center', 'bottom': '60rpx'}" @click="handleClickSwiper">
			</u-swiper>
		</view>
		<view class="list_wrap pr bc_fff flow_h minh_100">
			<view class="fx fx_nw fc_fff flow_x bc_f6">
				<template v-for="item,index in timeData">
					<view v-if="item.activitiesStatus==1" class="width_85 fx_sh fx fx_col aic pt_6 box"
						:style="[selectStyle(item)]" :key="index" @click="handleTime(item)">
						<CountDown :time="countdown(item)" @finish="getAllData()" />
						<view class="mt_2 fz_16 fb fc_r">
							{{item.seckillBeginTime}}
						</view>
					</view>
					<view v-else class="width_85 fx_sh fx fx_col aic pt_6 box" :style="[selectStyle(item)]" :key="index"
						@click="handleTime(item)">
						<view class="fz_16 fb fc_r" :style="[selectTxtStyle(item)]">
							{{item.seckillBeginTime}}
						</view>
						<view class="mt_4 fz_12 fc_999" :style="[selectSubStyle(item)]">
							即将开抢
						</view>
					</view>
				</template>
			</view>
			<u-sticky offsetTop="0">
				<view class="tabs_wrap">
					<u-tabs :current="currentType" :list="cateList" keyName="typeName" lineColor="#F93914"
						itemStyle="font-size:28rpx;padding: 20rpx 16rpx;background: #fff; " activeStyle="color: #F93914"
						inactiveStyle="color: #000000" lineWidth="32rpx" lineHeight="6rpx"
						@change="handleGoodsType"></u-tabs>
				</view>
			</u-sticky>
			<view class="pt_8 plr_16 pb_8">
				<view class="ptb_8" v-for="item,index in dataList" :key="index">
					<GoodsCard :data="item" :parentData="currentTimeData" type="seckill-card" goodsType="2" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import CountDown from '@/components/CountDown'
	import dataMixin from '@/mixins/data.js'
	import bannerMixin from '@/mixins/banner.js'
	import cateMixin from '@/mixins/cate.js'
	import api from '@/service/config/api.js'
	//0-未开始, 1-开始, 2-结束, 3-今日未开始, 4-今日已结束
	export default {
		mixins: [dataMixin, bannerMixin, cateMixin],
		components: {
			GoodsCard,
			CountDown
		},
		data() {
			return {
				currentNum: 0,
				dataInfo: {
					banner: []
				},
				timeData: {},
				listUrl: '/goods/api/product/seckillProductList',
				params: {
					userType: this.$store.state.userInfo.identityType || 1,
					functionRange: this.$store.state.functionRange
				},
				dataList: [],
				bannerId: 3, // banner位置
				noHideLoading: true,
				currentTimeData: {}, // 当前秒杀时段
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
			}
		},
		computed: {
			countdown() {
				return (item) => {
					return this.$utils.getFullTime(item.seckillEndTime) - new Date().getTime()
				}
			},
			timeStr() {
				return (data) =>
					uni.$u.timeFormat(data, 'hh:MM')
			},
			selectStyle() {
				return item => item.index == this.currentTimeData.index ? {
					'background-color': '#fff'
				} : {}
			},
			selectTxtStyle() {
				return item => item.index == this.currentTimeData.index ? {
					'color': '#1a1a1a'
				} : {}
			},
			selectSubStyle() {
				return item => item.index == this.currentTimeData.index ? {
					'color': '#FE0000',
					'font-weight': '600'
				} : {}
			},
		},
		onLoad() {
			if(this.$store.state.userInfo.customerId)
				this.$set(this.params, 'customerId', this.$store.state.userInfo.customerId)
			this.getCateList()
		},
		onShow() {
			this.noHideLoading = true
			this.getAllData()
		},
		watch: {
			currentTimeData: {
				handler(newVal, oldVal) {
					if (Object.keys(newVal).length && Object.keys(oldVal).length) {
						this.$set(this.params, 'seckillBeginTime', newVal.seckillBeginTime)
						this.$set(this.params, 'seckillEndTime', newVal.seckillEndTime)
						this.noHideLoading = false
						this.getData(true)
					}
				},
				deep: true
			}
		},
		methods: {
			getAllData() {
				this.$utils.loading()
				Promise.all([this.getBannerData(), this.getTimeData()]).then(() => {
					uni.hideLoading()
				}).finally(() => {
					uni.hideLoading()
				})
			},
			getTimeData() {
				return new Promise(resolve => {
					api.get('/goods/api/product/getSeckillTime', {
						functionRange: this.$store.state.functionRange
					}, {
						noHideLoading: true,
					}).then(res => {
						if (res.data && res.data.length) {
							let data = res.data.filter(item => item.activitiesStatus != 2).map((item,
								index) => ({
								...item,
								index,
							}))
							if (data && data.length) {
								this.timeData = data
								this.currentTimeData = data[0]
								this.$set(this.params, 'seckillBeginTime', data[0]
									.seckillBeginTime)
								this.$set(this.params, 'seckillEndTime', data[0]
									.seckillEndTime)
							}
						}
						this.getData(true).finally(() => resolve())
					}).catch(err => {
						console.log(err)
						resolve()
					})
				})
			},
			onChangeCountdown(e) {
				this.timeData = e
			},
			handleGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/pages/detail?id=${item.id}&type=2`
				})
			},
			handleTime(item) {
				this.currentTimeData = item
			}
		},
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss" scoped>
	.seckill_container {
		.list_wrap {
			top: -32rpx;
			margin-top: -16rpx;
			border-radius: 24rpx 24rpx 0 0;
		}
	}
</style>